<template>
  <view
    class="poster-swiper"
    :style="{
      width: width ? width : '100%',
      height: height ? height : '100%'
    }"
  >
    <!-- 顶部显示当前第几张 -->
    <view class="poster-num" v-if="isShowPosterNum && images.length > 0">
      选择海报 {{ currentIndex + 1 }}/{{ images.length }}
    </view>

    <!-- swiper 轮播 -->
    <swiper
      class="poster-swiper-box"
      :indicator-dots="false"
      :circular="true"
      :autoplay="false"
      :current="currentIndex"
      previous-margin="100rpx"
      next-margin="100rpx"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in images" :key="index">
        <view
          class="swiper-item-con"
          :class="{
            active: index === currentIndex,
            prev: index === (currentIndex - 1 + images.length) % images.length,
            next: index === (currentIndex + 1) % images.length
          }"
        >
          <!-- 主图 -->
          <image
            :src="typeof item === 'string' ? item : item.src"
            class="main-img"
            mode="scaleToFill"
          />

          <!-- 二维码 -->
          <image
            v-if="qrCode"
            :src="qrCode"
            class="qr-img"
            mode="scaleToFill"
          />

          <!-- 标题（跟随图片一起滑动） -->
          <view
            v-if="item.title"
            class="img-title"
            :style="[titleStyle, item.titleStyle || {}]"
          >
            {{ item.title }}
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  images: {
    type: Array,
    default: () => [],
  },
  qrCode: {
    type: String,
    default: "",
  },
  modelValue: {
    type: Number,
    default: 0,
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  isShowPosterNum: {
    type: Boolean,
    default: true,
  },
  // 全局默认标题样式
  titleStyle: {
    type: Object,
    default: () => ({
      fontSize: "26rpx",
      color: "#333",
      textAlign: "center",
    }),
  },
});

const emit = defineEmits(["update:modelValue", "change"]);
const currentIndex = ref(props.modelValue);

watch(
  () => props.modelValue,
  (val) => {
    currentIndex.value = val;
  }
);

function onSwiperChange(e) {
  currentIndex.value = e.detail.current;
  emit("update:modelValue", currentIndex.value);
  emit("change", currentIndex.value);
}
</script>

<style lang="scss" scoped>
.poster-swiper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  padding-bottom: 30upx;
  box-sizing: border-box;

  .poster-num {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    padding: 20rpx 0;
    background: transparent;
  }

  .poster-swiper-box {
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .swiper-item-con {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 改为上下布局 */
    justify-content: flex-start;
    align-items: center;
    transform: scale(0.8);
    transition: all 0.3s ease;
    background: transparent;

    .main-img {
      width: 100%;
      flex: 1; /* 占据大部分空间 */
      border-radius: 20rpx;
    }

    .qr-img {
      position: absolute;
      bottom: 100rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
    }

    .img-title {
      width: 100%;
      margin-top: 12rpx;
    }
  }

  .swiper-item-con.active {
    transform: scale(1);
    z-index: 10;
  }
  .swiper-item-con.prev,
  .swiper-item-con.next {
    transform: scale(0.85);
    opacity: 0.8;
  }
}
</style>
